import React, { useState, useRef, useEffect } from 'react';
import TSwiperList from './TSwiperList';
import styles from './index.css';

export default (props) => {
  var delay = props.delay,
    width = props.width,
    height = props.height,
    autoplay = props.autoplay,
    dots = props.dots,
    arrows = props.arrows,
    items = props.items,
    speed = props.speed,
    onChange = props.onChange;
  var _a = useState(0),
    index = _a[0],
    setIndex = _a[1];
  var swiperListRef = useRef(null);
  var arrowLeftRef = useRef(null);
  var arrowRightRef = useRef(null);
  var timer;
  var clickLeft = function () {
    go(-1);
    turn();
  };
  var clickRight = function () {
    go(1);
    turn();
  };
  useEffect(function () {
    if (autoplay) {
      turn();
    }
    return function () {
      return clearInterval(timer);
    };
  });
  var turn = function () {
    clearInterval(timer);
    timer = setInterval(function () {
      go(1);
    }, delay * 1000);
  };
  var go = function (step) {
    var nexIndex = index + step;
    onChange && onChange(nexIndex);
    if (nexIndex > items.length && swiperListRef.current) {
      swiperListRef.current.style.transitionDuration = '';
      swiperListRef.current.style.left = '0';
      setTimeout(function () {
        if (swiperListRef.current) {
          swiperListRef.current.style.transitionDuration = speed + 's';
        }
        nexIndex = 1;
        setIndex(nexIndex);
      }, 30);
      return;
    }
    if (nexIndex < 0 && swiperListRef.current) {
      // 当小于第一张时  回到最后一张
      swiperListRef.current.style.transitionDuration = '';
      swiperListRef.current.style.left = items.length * -1 * width + 'px';
      setTimeout(function () {
        if (swiperListRef.current) {
          swiperListRef.current.style.transitionDuration = speed + 's';
        }
        nexIndex = items.length - 1;
        setIndex(nexIndex);
      }, 30);
      return;
    }
    setIndex(nexIndex);
  };
  return React.createElement(
    'div',
    {
      className: styles.slider_container,
      style: { width: width + 'px', height: height + 'px' },
      onMouseEnter: function () {
        if (dots && arrowLeftRef.current && arrowRightRef.current) {
          arrowLeftRef.current.style.display = arrowRightRef.current.style.display = 'block';
        }
      },
      onMouseLeave: function () {
        if (dots && arrowLeftRef.current && arrowRightRef.current) {
          arrowLeftRef.current.style.display = arrowRightRef.current.style.display = 'none';
        }
      },
    },
    React.createElement(TSwiperList, {
      forRef: swiperListRef,
      width: width,
      height: height,
      items: items,
      index: index,
      speed: speed,
    }),
    arrows
      ? React.createElement(
          'div',
          {
            'data-testid': 'left-button',
            className: styles.arrow_left,
            ref: arrowLeftRef,
            style: { display: 'none' },
            onClick: clickLeft,
          },
          React.createElement('img', { src: require('@/assets/img/chevron-left.png') }),
        )
      : null,
    arrows
      ? React.createElement(
          'div',
          {
            'data-testid': 'right-button',
            className: styles.arrow_right,
            ref: arrowRightRef,
            style: { display: 'none' },
            onClick: clickRight,
          },
          React.createElement('img', { src: require('@/assets/img/chevron-right.png') }),
        )
      : null,
    dots
      ? React.createElement(
          'div',
          { className: styles.progressBar },
          items.map(function (_, xIndex) {
            return React.createElement(
              'div',
              {
                key: 'dot' + xIndex,
                className: `${styles.bar} ${
                  xIndex === (index == items.length ? 0 : index) ? styles.active : ''
                }`,
              },
              React.createElement('div', { style: { animationDuration: delay + 's' } }),
            );
          }),
        )
      : null,
  );
};
